<!--
 * @Description: 项目管理-基础信息-头部组件
 * @Author gong
 * @create 2024/9/5 10:12
 -->
<!--setup-->
<script setup>
import { onMounted, getCurrentInstance, ref, watch, inject } from 'vue'
import { BaseForm, BaseFormItem } from '@shared/base/base-form' // form表单组件
import { deepClone, to } from 'sf-utils2'
import { useVModel } from '@vueuse/core'
import { formatDate, formatMoney } from '@shared/utils/common'
import SvgIcon from '@/components/svg-icon/index.vue'

const { proxy } = getCurrentInstance()
const props = defineProps({
  // form表单的栅格长度
  colNumber: {
    type: Number,
    default: () => 8
  },
  // list容器的宽度
  listContainerWidth: {
    type: String,
    default: () => '80%'
  },

  /**
   * 是否初始化结束
   */
  initial: {
    type: Boolean,
    default: false
  },
  // 当前状态 add: 发起立项  edit: 编辑立项  detail: 查看立项
  handle: {
    type: String,
    default: () => 'add'
  }
})
const emit = defineEmits([])

/* 状态 */
const formEl = ref(null)
const _initial = useVModel(props, 'initial', emit) // 是否初始化结束
// 表单校验规则
const rules = ref({})
// 表单标绑定数据
const formDt = ref({})
// 表单实例对象
const baseFormRef = ref(null)
// 项目基础信息
const __projBaseInfo__ = inject('__projBaseInfo__') || {}

const liSetting = ref([
  {
    title: '创建人',
    key: 'creator',
    isIcon: false
  },
  {
    iconSvg: 'approval/riqi',
    title: '创建时间',
    key: 'createTime',
    isIcon: true
  },
  {
    iconSvg: 'approval/transferor',
    title: '出让方',
    key: 'transferor',
    isIcon: true
  }
])

const hintList = ref([
  {
    label: '资产总金额：',
    value: 'assetTotalAmt',
    isMoney: true
  },
  {
    label: '本金：',
    value: 'principal',
    isMoney: true
  },
  {
    label: '户数：',
    value: 'debtorAmount'
  },
  {
    label: '案件数：',
    value: 'caseAmount'
  }
])

/* 方法 */
/**
 * 显示提示里的数据
 * @param item
 */
const showHintData = (item) => {
  return item.isMoney ? formatMoney(formDt.value[item.value] || 0) : formDt.value[item.value] || '0'
}

/**
 * @description:必填项目的校验
 */
const onSave = async () => {
  return new Promise(async (resolve) => {
    const [valid] = await to(baseFormRef.value.validate())
    if (valid) {
      resolve(formDt.value)
    } else {
      resolve(false)
    }
  })
}

/* 计算 */

/* 监听 */
watch(
  __projBaseInfo__,
  () => {
    const data = deepClone(__projBaseInfo__.value || {})
    data.createTime = formatDate(data.createTime, 'YYYY/MM/DD HH:mm:ss') || '' // 创建时间

    // 如果是详情数据，默认显示 '-'
    if (props.handle === 'detail') {
      data.prjIntro ||= '-' // 项目概况
      data.remark ||= '-' // 备注
    }

    formDt.value = data
  },
  { deep: true, immediate: true }
)

/* 周期 */

onMounted(() => {
  _initial.value = true
})

/* 暴露 */

defineExpose({
  $: proxy.$,
  onSave
})
</script>
<!--render-->

<template>
  <div class="page">
    <!-- 内容区 -->
    <div class="page-title">
      <div class="first">
        <div>
          <span
            v-tip="{ content: formDt.prjName, ellipsis: true }"
            class="proj-name__title"
          >{{
            formDt.prjName || '-'
          }}</span>
          <!--          <el-tag
            type="primary"
            size="small"
            :hit="true"
          >
            {{ formDt['templateType'] ? $dictLabel('templateType', formDt.templateType) : '-' }}
          </el-tag>-->
        </div>
        <div>项目编号:&nbsp;{{ formDt.prjCode }}</div>
      </div>
      <div class="second">
        <el-form
          ref="formEl"
          label-position="top"
          :model="formDt"
          require-asterisk-position="right"
          :rules="rules"
        >
          <div class="row">
            <div
              v-for="(item, index) in liSetting"
              :key="index"
              class="col"
            >
              <div :class="['form-item']">
                <div
                  v-if="item.isIcon"
                  class="i__icon"
                >
                  <!--                  <i :class="['iconfont', item.iconSvg, 'text-18px']" />-->
                  <SvgIcon
                    :svg="item.iconSvg"
                    size="18"
                  />
                </div>
                <div
                  v-else
                  class="image__no"
                >
                  {{ formDt[item['key']] ? formDt[item['key']].slice(formDt[item['key']].length - 2) : '-' }}
                </div>
                <el-form-item
                  :label="item.title"
                  :prop="item.required && item.key"
                >
                  <div
                    v-tip="{ content: formDt.prjName, ellipsis: true }"
                    class="desc__detail"
                  >
                    {{ formDt[item['key']] || '-' }}
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div
      v-if="formDt.relAssetPackageFlag"
      class="page-hint"
    >
      <div
        v-for="(item, index) in hintList"
        :key="index"
        class="text-14px h-22px leading-22px"
      >
        <span class="mr-4px text-[#666]">{{ item.label }}</span>
        <span class="family-din"><span v-if="item.isMoney">￥</span>{{ showHintData(item) }}</span>
      </div>
    </div>
    <div class="page-form">
      <BaseForm
        ref="baseFormRef"
        v-model="formDt"
        label-width="110px"
        label-position="top"
        :gutter="24"
        :rules="rules"
        :validate-on-rule-change="false"
        :class="handle === 'detail' && 'detail-form'"
      >
        <BaseFormItem
          label="项目类型"
          prop="prjType"
          type="select"
          dict="projectType"
          :required="handle === 'add'"
          :col="colNumber"
          disabled
        />
        <BaseFormItem
          label="资产类型"
          prop="assetType"
          type="text"
          :required="handle === 'add'"
          :col="colNumber"
          disabled
        />
        <BaseFormItem
          label="收购方式"
          prop="acqstnType"
          type="select"
          dict="purchaseType"
          :required="handle === 'add'"
          :col="colNumber"
          disabled
        />
        <BaseFormItem
          label="项目概况"
          prop="prjIntro"
          type="default"
          :col="24"
        >
          <el-input
            v-model="formDt.prjIntro"
            type="textarea"
            placeholder="请输入项目概况"
            :rows="2"
            maxlength="200"
            :show-word-limit="false"
            :disabled="handle === 'detail'"
          />
        </BaseFormItem>
        <BaseFormItem
          label="备注"
          prop="remark"
          type="default"
          :col="24"
        >
          <el-input
            v-model="formDt.remark"
            type="textarea"
            placeholder="请输入备注"
            :rows="2"
            maxlength="200"
            :show-word-limit="false"
            :disabled="handle === 'detail'"
          />
        </BaseFormItem>
      </BaseForm>
    </div>
  </div>
</template>

<!--style-->

<style scoped lang="less">
.page {
  padding: 16px 16px 0;
  background: #fff;
  border-radius: 6px;
  box-sizing: border-box;

  .page-title {
    //padding-bottom: 10px;
    border-bottom: 1px solid var(--ijep-menu-border-color);

    .first {
      div:nth-of-type(1) {
        display: flex;
        font-size: 15px;
        font-weight: 600;
        color: #333;
        align-items: center;

        .proj-name__title {
          display: inline-block;
          //padding-right: 8px;
          overflow: hidden;
          font-size: 16px;
          font-weight: bolder;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        // 标题右侧标签
        :deep(.ijep-tag--small) {
          padding: 0 4px;
        }
      }

      div:nth-of-type(2) {
        padding: 5px 0;
        font-size: 12px;
        color: @text-low-emphasize-color;
      }
    }

    .second {
      width: v-bind(listContainerWidth);
      padding: 16px 0;

      .row {
        display: flex;
        align-items: center;
        gap: 80px;

        /* :deep(.col) {
          flex: 1;
        } */

        /* .col:last-child {
          flex: 1;

          :deep(.ijep-form-item) {
            width: 0;
          }
        } */

        .form-item {
          display: flex;
          align-items: center;
          gap: 8px;

          .i__icon {
            display: flex;
            width: 32px;
            height: 32px;
            color: @text-low-emphasize-color;
            border: 1px solid @border-color;
            border-radius: 6px;
            justify-content: center;
            align-items: center;
          }

          .image__no {
            width: 32px;
            height: 32px;
            font-size: 12px;
            line-height: 32px;
            color: #fff;
            text-align: center;
            background: #3074e8;
            border-radius: 6px;
          }

          :deep(.ijep-form-item) {
            height: 100%;
            margin-bottom: 0;
            flex: 1;

            .ijep-form-item__label {
              width: max-content;
              min-height: 0;
              padding-right: 0;
              font-size: 12px;
              color: #999;
            }

            .ijep-form-item__content {
              //height: 19px;
              margin-top: 2px;
              font-size: 12px;
              line-height: 0;
            }

            .desc__detail {
              max-width: 240px;
              overflow: hidden;
              font-size: 12px;
              line-height: normal;
              color: #333;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .ijep-input__inner {
              color: #333;
              cursor: pointer;
            }

            .date-container {
              width: 100%;
              height: 19px;
              cursor: pointer;

              .ijep-input {
                width: 100%;
                height: 19px;
              }

              .ijep-input__prefix {
                display: none;
              }

              .ijep-input__wrapper {
                border-color: #fff !important;
                box-shadow: none;
                padding: 1px 2px;
              }
            }
          }
        }
      }
    }
  }

  .page-hint {
    display: flex;
    width: 100%;
    padding: 9px 16px;
    margin-top: 16px;
    background: rgb(48 116 232 / 5%);
    border: 1px solid rgb(48 116 232 / 25%);
    border-radius: 4px;
    align-items: center;
    gap: 40px;
  }

  .page-form {
    padding-top: 16px;

    .detail-form {
      :deep(.ijep-form-item) {
        .ijep-select {
          .ijep-select__suffix {
            display: none;
          }
        }
      }
    }
  }
}
</style>
